<template>
    <div id="bookrack">
      <tab-bar >
        <tab-bar-item  path="/bookrack/collect" font-size="1.2rem">
          <div  slot="item-text">{{tit[0]}}</div>
        </tab-bar-item>
        <tab-bar-item path="/bookrack/history"  font-size="1.2rem">
          <div slot="item-text">{{tit[1]}}</div>
        </tab-bar-item>
        <tab-bar-item  path="/bookrack/cache"  font-size="1.2rem">
          <div slot="item-text">{{tit[2]}}</div>
        </tab-bar-item>
      </tab-bar>
      <transition :name="transitionName">
        <keep-alive>
          <router-view  class="child-view"></router-view>
        </keep-alive>
      </transition>
    </div>
</template>

<script>
  import TabBar from '../../components/tabbar/TabBar'
  import TabBarItem from '../../components/tabbar/TabBarItem'
    export default {
        name: "Bookrack",
      components:{
        TabBar,
        TabBarItem
      },
      data(){
          return{
            transitionName: '',
            keepPath:'/bookrack/collect',
            tit:['追漫','历史','缓存'],
          }
      },
      watch: {
        '$route'(to, from) {
          if(to.meta.index > from.meta.index){
            this.transitionName = 'slide-left';
          }else{
            this.transitionName = 'slide-right';
          }
        }
      },
      activated(){  //homepage活跃时
        // console.log('activated');
        if(this.$route.path!=this.keepPath){//解决在首页刷新重复添加路由报错的问题
          this.$router.push(this.keepPath)
        }
      },
      beforeRouteLeave(to,from,next){   //离开此路由之前 保留切换tabbar之前的路由
        this.keepPath = this.$route.path
        // console.log('befor',this.keepPath);
        next()
      },
    }
</script>

<style lang="less">
@import "../../assets/css/bookrack/boorrack";
</style>
